<template>
  <!--订单 工单-->
  <!--<div class="col-md-12">
    <div class=" task-row">-->
  <!--订单任务-->
  <div class="col-md-6 orderCom">
    <div class="module task-module order-task">
      <section class="module-header">
        <h1>订单任务</h1>
        <a onClick="orderTaskAll()">查看全部&gt;</a>
      </section>
      <div class="module-content">
        <div class="row order-task-row">
          <div class="col-md-6">
            <div class="data">
              <span class="data_num">{{orderTk.data.uapOrderVO.currentWaitOrderNumber}}</span>
              <p class="data-title">新到订单</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="data">
              <p>{{orderTk.data.uapOrderVO.currentNumber}}</p>
              <span class="data-title">今日已处理订单</span>
            </div>
          </div>
        </div>
        <div class="data_parent-border" v-show="orderFlag">
          <div class="data_border_box data_border_box_task" >
            <Table :columns="formTitle" :data="uapOrders" :show-header="false"></Table>
          </div>
        </div>
        <div class="order-null" v-show="!orderFlag&&complainFlag">
          <img src="/static/resources/img/orderNull.png">
        </div>
      </div>
    </div>
  </div>
   <!-- </div>
  </div>-->
</template>

<script>
  // var currentTime;
    export default {
        name: "order-com",
        props: ['orderTk','orderFlag','complainFlag'],
        data(){
            return{
                self:this,
                // currentNumber:0,
                currentTime:'',
                formTitle:[
                    { type:'index',width:25,align:'center'},
                    {key:"orderNumber",width:120,
                        render:function (h,params){
                            return h('p' ,{
                                domProps: {
                                    title: params.row.orderNumber
                                },
                                style: {
                                    maxWidth: '120px',
                                    textOverflow: "ellipsis",
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    color: '#3a8be9'
                                }
                            },params.row.orderNumber)
                        }
                    },
                    { key:"createTime",width:140,
                        render: function (h, params) {
                            let time = new Date(Number(this.row.createTime)).format('yyyy-MM-dd hh:mm');
                            return("div",[ h('img' ,{
                                domProps: {
                                    align: 'center',
                                    src: require('../../assets/clock.png'),
                                },
                                style: {
                                    width:'15px',
                                    marginTop:"-3px"
                                }
                            }),h("div",{style:{display:"inline-block"}},time)])
                        }
                    },
                    {key:'status',width:50,
                        render:(h,params) =>{
                        if(new Date(params.row.createTime + 1000 * 60 * 10) > new Date(this.orderTk.data.uapOrderVO.currentTime)){
                            return h("label", {
                                    style: {
                                        cursor:"default",
                                        backgroundColor: "#b2b2b2",
                                        width: '32px',
                                        height: '18px',
                                        fontSize: '11px',
                                        padding: '0.5px 5px',
                                        borderRadius: '3px'
                                    }
                                }
                                ,'正常');
                        }else{
                            return h("label", {
                                    style: {
                                        cursor:"default",
                                        backgroundColor: "#f04134",
                                        width: '32px',
                                        height: '18px',
                                        fontSize: '11px',
                                        padding: '0.5px 5px',
                                        borderRadius: '3px',
                                        color:'#fff'
                                    }
                                }
                                ,'紧急');
                         }

                        }
                    },
                    {
                        key: "action",width:70,
                        render:(h,params) =>{
                            return h("button", {
                                    style: {
                                        height: '21px',
                                        width: '45px',
                                        borderRadius: '5px',
                                        padding: '0 4px',
                                        lineHeight: '1px',
                                        fontSize: '12px',
                                        marginTop: '2px',
                                        color: '#108ee9',
                                        background: '#fff',
                                        border: '1px solid #108ee9'
                                    }
                                }
                                ,'受理');
                        }
                    }
                ],
                formData:[],
                orderNull:false,
                orderData:false,
                data:[ { "createTime": 1521529227000, "currentNumber": null, "currentTime": null, "orderNumber": "Y180320145543792040" }, { "createTime": 1521529301000, "currentNumber": null, "currentTime": null, "orderNumber": "Y180320145657759690" }, { "createTime": 1521599695000, "currentNumber": null, "currentTime": null, "orderNumber": "Y180321103008664887" } ]
            }
        },
        computed:{
          uapOrders(){
            let temp = this.orderTk.data.uapOrderVO.uapOrders;
            if(!(temp.__proto__.constructor===Array)){
              temp = [];
            }
            return temp;
          }
        }
    }
</script>

<style >
  .col-md-6.orderCom{
    padding-left: 0;
    padding-right: 10px;
  }
  .orderCom .ivu-table table{
    width:100%!important;
  }
  .orderCom .ivu-table-cell {
    padding-left: 0px!important;
    padding-right: 10px;
  }
  .orderCom .ivu-table-wrapper{
    border: 0px!important;
  }
  .orderCom .ivu-table tr:nth-child(2n+1){
    background-color: #F5F5F5;
  }
  .orderCom .ivu-table tr:hover{
    background-color: #c8e4fa;;
  }
  .orderCom .ivu-table td{
    height: 32px;
    cursor: default;
    border-bottom: 0px;
    background-color: transparent;
  }
  .orderCom .ivu-table-body{
    overflow: hidden;
  }
  .orderCom .ivu-table:before,
  .orderCom .ivu-table:after{
    background-color: transparent;
  }
  .orderCom .data_border_box_task{
    overflow-y:auto;
    height: 169px;
    border-radius: 5px;
  }
  .orderCom .order-task .order-null{
    height: 169px;
    width:100%;
    text-align: center;
  }
  .orderCom .order-task .order-null img{
    margin: 18px auto;
  }
  .orderCom .task-module{
    padding: 0;
    min-width: 405px;
    width: 100%;
    height: auto;
  }
  .orderCom .module-header{
    height: 35px;
    padding-left: 20px;
    padding-right: 20px
  }
  .orderCom .order-task .module-content .data .data-content{
    display: inline-block;
    padding-left: 25px;
  }
  .orderCom .order-task .module-content .data p a{
    font-size: 34px;
    text-align: center;
  }
  .order-task .module-content .data p:hover a{
    cursor: pointer;
    text-decoration: underline;
  }
  .orderCom .order-task .module-content .data img{
    display: inline-block;
    vertical-align: super;
  }
  .orderCom .module-content .data{
    position: relative;
    margin-bottom: 25px;
    text-align: center;
  }
  .orderCom .orderCom .data-title{
    font-size: 13px!important;
    color: #373c64;
  }
  .orderCom .module-content .data p a{
    color: #d00101;
  }
  /*任务超时*/
  .orderCom .module-content{
    height:auto;
    padding: 20px 20px 10px 20px;
  }
  .orderCom .data_num{
    font-family: 微软雅黑;
    color: #d00101;
    font-size: 34px;
  }
  .orderCom .module-content .data{
    position: relative;
    margin-bottom: 25px;
  }
  .orderCom .data-title{
    font-size: 13px!important;
  }
  .orderCom .data p{
    color: #373c64;
    font-size: 34px ;
  }


</style>
